<template>
  <div class="app-container">
    <h2>设备运行时数据</h2>
    <div v-if="loading" class="loading-state">
      <p>正在加载设备运行时数据...</p>
    </div>
    <el-card v-else-if="runtimeData">
      <template #header>
        <div class="card-header">
          <span>{{ runtimeData.deviceName }} - 运行时数据</span>
        </div>
      </template>

      <el-descriptions title="基本信息" :column="2" border>
        <el-descriptions-item label="设备类型">
          <img :src="deviceTypeIcon" alt="设备类型" class="info-icon">{{ runtimeData.deviceType }}
        </el-descriptions-item>
        <el-descriptions-item label="型号">
          <img :src="modelNumberIcon" alt="型号" class="info-icon">{{ runtimeData.modelNumber }}
        </el-descriptions-item>
        <el-descriptions-item label="额定功率">
          <img :src="ratedPowerIcon" alt="额定功率" class="info-icon">{{ runtimeData.ratedPower }} KW
        </el-descriptions-item>
        <el-descriptions-item label="所属区域">
          <img :src="areaNameIcon" alt="所属区域" class="info-icon">{{ runtimeData.areaName || 'N/A' }}
        </el-descriptions-item>
         <el-descriptions-item label="记录时间">
           <img :src="runtimeTimeIcon" alt="记录时间" class="info-icon">{{ formatDate(runtimeData.recordTime) }}
         </el-descriptions-item>
      </el-descriptions>

      <el-descriptions title="实时数据" :column="2" border class="realtime-data">
        <el-descriptions-item label="发电功率">
          <img :src="powerOutputIcon" alt="发电功率" class="info-icon">{{ runtimeData.powerOutput }} KW
        </el-descriptions-item>
        <el-descriptions-item label="风速">
           <img :src="windSpeedIcon" alt="风速" class="info-icon">{{ runtimeData.windSpeed }} m/s
        </el-descriptions-item>
        <el-descriptions-item label="转子速度">
          <img :src="rotorSpeedIcon" alt="转子速度" class="info-icon">{{ runtimeData.rotorSpeed }} RPM
        </el-descriptions-item>
        <el-descriptions-item label="温度">
          <img :src="temperatureIcon" alt="温度" class="info-icon">{{ runtimeData.temperature }} °C
        </el-descriptions-item>
        <el-descriptions-item label="湿度">
          <img :src="humidityIcon" alt="湿度" class="info-icon">{{ runtimeData.humidity }} %
        </el-descriptions-item>
        <el-descriptions-item label="振动水平">
          <img :src="vibrationLevelIcon" alt="振动水平" class="info-icon">{{ runtimeData.vibrationLevel }}
        </el-descriptions-item>
        <el-descriptions-item label="运行小时">
          {{ runtimeData.operationHours }} h <!-- No specific icon for operation hours found -->
        </el-descriptions-item>
        <el-descriptions-item label="状态码">
           <img :src="statusCodeIcon" alt="状态码" class="info-icon">
           <el-tag :type="getStatusTagType(runtimeData.statusCode)">{{ runtimeData.statusCode }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>

       <div style="margin-top: 20px; text-align: right;">
         <el-button @click="goBack">返回设备列表</el-button>
       </div>

    </el-card>
     <div v-else class="error-state">
      <p>无法加载设备运行时数据。请确认设备ID有效且后端服务正常。</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getDeviceRuntimeDataById } from '@/api/device/information';
import { ElMessage, ElTag, ElDescriptions, ElDescriptionsItem } from 'element-plus'; // Import necessary Element Plus components

// Import icons
import deviceTypeIcon from '@/assets/device/设备类型.png';
import modelNumberIcon from '@/assets/device/型号.png';
import ratedPowerIcon from '@/assets/device/额定功率.png';
import areaNameIcon from '@/assets/device/所属区域.png';
import runtimeTimeIcon from '@/assets/device/运行时间.png'; // Using '运行时间.png' for record time
import powerOutputIcon from '@/assets/device/发电功率.png';
import windSpeedIcon from '@/assets/device/风速.png';
import rotorSpeedIcon from '@/assets/device/速度.png'; // Using '速度.png' for rotor speed
import temperatureIcon from '@/assets/device/温度.png';
import humidityIcon from '@/assets/device/湿度.png';
import vibrationLevelIcon from '@/assets/device/振动.png'; // Using '振动.png' for vibration level
import statusCodeIcon from '@/assets/device/系统状态.png'; // Using '系统状态.png' for status code
// Note: '运行时间.png' is used for record time. No specific icon for operation hours found.

const route = useRoute();
const router = useRouter();
const runtimeData = ref(null);
const loading = ref(true);

const fetchRuntimeData = async () => {
  const deviceId = route.params.deviceId;
  if (!deviceId) {
    ElMessage.error('未找到设备ID');
    loading.value = false;
    return;
  }

  try {
    const response = await getDeviceRuntimeDataById(deviceId);
    // Assuming the API returns the data directly or within a 'data' property
    if (response.code === 200) { // Check for success code
       runtimeData.value = response.data; // Use the data property
    } else {
      // Handle case where response code is not 200
       runtimeData.value = null;
       ElMessage.warning(response.msg || '未获取到设备运行时数据'); // Use msg for warning
    }

  } catch (error) {
    console.error("Failed to fetch runtime data:", error);
    ElMessage.error('获取运行时数据失败');
    runtimeData.value = null;
  } finally {
    loading.value = false;
  }
};

const getStatusTagType = (statusCode) => {
  switch (statusCode) {
    case 'NORMAL':
      return 'success';
    case 'WARNING':
      return 'warning';
    case 'ALERT':
      return 'danger';
    default:
      return 'info';
  }
};

const goBack = () => {
  router.back();
};

// Method to format date string
const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = ('0' + (date.getMonth() + 1)).slice(-2);
  const day = ('0' + date.getDate()).slice(-2);
  const hours = ('0' + date.getHours()).slice(-2);
  const minutes = ('0' + date.getMinutes()).slice(-2);
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

onMounted(() => {
  fetchRuntimeData();
});

</script>

<style scoped>
.app-container {
  padding: 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.realtime-data {
  margin-top: 20px;
}

.loading-state,
.error-state {
  text-align: center;
  padding: 20px;
  color: #999;
}

.info-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle; /* Align icon with text */
}

/* Adjust description item label width if needed */
/*
.el-descriptions-item__label {
  width: 100px; 
}
*/

/* Adjust spacing within descriptions item value if needed */
.el-descriptions-item__content {
  display: flex; /* Use flexbox for content to align icon and text */
  align-items: center; /* Vertically center items */
}

/* Adjust tag alignment within flex container if needed */
.el-tag {
  vertical-align: middle;
}

</style>
